<template>
	<view class="price-main" @touchmove.stop.prevent>
		<view class="title">价格区间 (万)</view>
		<view class="withMinHeight">
			<view class="selections-wrapper">

				<view class="selection-block" v-for="(item  ,index ) in showArray" :key="index"
					:class="activeSections[index+1]===true ? 'activeBlock':''"
					@click="setPriceSection(item, index + 1)">

					<view class="show-price" v-if="item[0] === '0' ||item[0] === '1' ">
						{{item[1] | tenMillion}}
						<text v-if="item[1]>10000">万</text>
						元以下
					</view>
					<view class="show-price" v-else-if="item[1] !== '-1'">
						{{item[0] | tenMillion }}
						<text v-if="item[0]>10000">万</text>
						-{{item[1] | tenMillion}}
						<text v-if="item[1]>10000">万</text>
						元
					</view>
					<view class="show-price" v-else-if="item[1] === '-1'">
						{{item[0] | tenMillion }}
						<text v-if="item[0]>10000">万</text>
						元以上
					</view>

				</view>


				<view class="selection-block" style="background-color: white"></view>
				<view class="selection-block" style="background-color: white"></view>

			</view>
		</view>
		<view class="input-wrapper">
			<view class="uni-input-wrapper">
				<input type="number" v-model="manualPriceSection[0]" @focus="clearSelection" class="uni-input"
					placeholder="最低价格" />
			</view>
			<view class="horizontal-line"></view>
			<view class="uni-input-wrapper">
				<input type="number" v-model="manualPriceSection[1]" @focus="clearSelection" class="uni-input" style=""
					placeholder="最高价格" />
			</view>
			<view class="text">元</view>
		</view>
		<view class="buttons-wrapper">
			<button @click="reset" class="blue-wide-button grey-button button">清空</button>
			<button class="blue-wide-button  button" @click="confirm">确定</button>
		</view>
	</view>
</template>

<script>
	import {
		deepEqual,
		removeValOf
	} from "../../util/funcs"
	import {
		filter
	} from "../../util/reuse/filter"
	import {
		d_uniShowToast,
		uniShowToast
	} from "../../util/misc"
	import {
		ONLINE_SERVER_USER,
		proRequest,
		uniRequest
	} from "../../util/network"
	import {
		originalData
	} from "../../util/commonFuncs"

	export default {
		mixins: [filter],
		data() {
			return {
				manualPriceSection: ['', ''],
				sellPriceArr: [],
				// sellPriceArr: [[2000000, 3000000], [3000000, 4000000], [4000000, 5000000], [5000000, 6000000], [6000000, 8000000], [8000000, 10000000], [10000000, 15000000], [15000000, 20000000]],
				rentPriceArr: [],
				showArray: [],
				value: [0],
				indicatorStyle: "height: 50px;line-height: 50px;color: #004fbf;",
				currentSections: [], // 手动选择的价格区间
				activeSections: [
					false, false, false,
					false, false, false,
					false, false, false,
					false
				] // 用于显示样式
			}
		},
		methods: {
			dealWith(resultArray, arr) {
				let temArrItem = []
				for (let i = 0, len = resultArray.length; i < len; i++) {
					temArrItem.push(resultArray[i].start)
					temArrItem.push(resultArray[i].end)
					arr.push(temArrItem)
					temArrItem = []
				}
			},
			clearSelection() {
				// 清空已经选择的价格区间
				this.currentSections = originalData(this).currentSections
				this.activeSections = originalData(this).activeSections

			},
			setPriceSection(section, i) {
				this.manualPriceSection = ['', '']
				if (!removeValOf(this.currentSections, section)) {
					this.currentSections.push(section)
				}
				this.activeSections[i] = !this.activeSections[i]
			},
			reset() {
				this.clearSelection()
				this.manualPriceSection = ['', '']
			},
			confirm() {
				let temSection = []
				if (this.currentSections.length > 0) { // 手动选择
					temSection = this.currentSections
				} else { // 人工输入
					let t1 = [this.manualPriceSection[0], this.manualPriceSection[1]]
					if (this.manualPriceSection[0] < 0 && this.manualPriceSection[1] < 0 && this.manualPriceSection[0] !==
						-1 && this.manualPriceSection[0] !== -1) {
						d_uniShowToast({
							title: '价格不可为负数'
						}, false)
						return
					}
					temSection.push(t1)
					if (parseFloat(this.manualPriceSection[0]) > parseFloat(this.manualPriceSection[1])) {
						// console.log(this.manualPriceSection,)
						uniShowToast('错误: 最低价格高于最高价格')
						return
					}
				}
				if (deepEqual(temSection, [
						['', '']
					])) {
					temSection = []
				}
				let opt;
				if (this.rentSell === 1) { // 租房
					opt = {
						house_price: temSection
					}
				} else { // 2 售房
					opt = {
						house_sell_price: temSection
					}
				}
				this.$emit('confirm', opt)
			},
			getSellPriceArray() {
				let url = ONLINE_SERVER_USER + '/selling'
				return new Promise(resolve => {
					uniRequest('', {}, {
						url: url,
						success: ({
							data
						}) => {
							let resArr = data.data
							// console.log('sellPriceArray: ',resArr)
							this.dealWith(resArr, this.sellPriceArr)
							resolve()
						}
					})
				})

			},
			async getRentPriceArray() {
				let url = ONLINE_SERVER_USER + '/fee'
				let {
					data
				} = await proRequest('', {}, {
					url: url
				});
				// console.log('RentPriceArray', data)
				this.dealWith(data, this.rentPriceArr)
			},
			setShowArray(type) {
				this.clearSelection();
				if (type === 1) { // 1 租房, 2 售房
					this.showArray = this.rentPriceArr
				} else {
					this.showArray = this.sellPriceArr
				}
			}
		},

		mounted: async function() {
			await this.getRentPriceArray()
			await this.getSellPriceArray()
			this.setShowArray(this.rentSell)

		},
		props: {
			changeOptionShow: {
				default: 1,
			},
			rentSell: {
				default: 1,
			}
		},
		watch: {
			rentSell: function(newVal, oldVal) {
				this.setShowArray(newVal)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../../assets/styles/global";
	@import "./common";

	.price-main {
		width: 100vw;
		padding-top: 3vw;
		padding-left: 3vw;
		padding-right: 3vw;
		display: flex;
		align-items: flex-start;
		background-color: white;
		height: 85vw;
		flex-direction: column;

		.title {
			text-align: left;
			width: 100%;
			font-size: 4vw;
			font-weight: bold;
			margin-bottom: 3vw;
		}

		.withMinHeight {
			min-height: 165px;

			.selections-wrapper {
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;

				.selection-block {
					.show-price {}

					width: 29vw;
					height: 7vw;
					background-color: #f6f6f6;
					@include center;
					font-size: 3vw;
					margin-bottom: 4vw;
					margin-right: 3vw;
					border-radius: 1vw;

					&:nth-child(3n+3) {
						margin-right: 0;
					}

					&:active {
						background-color: #dcdcdc;
					}

				}

				.activeBlock {
					border: 1px solid $blueBorderColor;
					color: $activeBlueTextColor;
				}
			}

		}

		.input-wrapper {
			margin-bottom: 8vw;
			display: flex;
			align-items: center;

			.uni-input-wrapper {
				height: 7vw;
				width: 31vw;
				border: 1px solid #999;
				border-radius: 1vw;
				@include center;

				.uni-input {
					font-size: 3vw;
					text-align: center
				}
			}

			.horizontal-line {
				margin-right: 2vw;
				margin-left: 2vw;
				background-color: #D8D8D8;
				width: 2vw;
				height: 1px;
			}

			.text {
				font-size: 3vw;
				color: #323232;
				margin-left: 2vw;
			}
		}

	}

	.diy {
		padding: 30px;
		height: 40px;
		line-height: 40px;
		font-size: 12px;
	}

	.diy>view {
		padding: 0 10px;
		display: flex;
		margin-left: 10px;
		height: 40px;
		border-radius: 10px;
		border: 1px solid #C8C7CC;
		width: 70%;
	}

	.diy>view>input {
		flex-grow: 1;
		position: relative;
		top: 10px;
		font-size: 12px;
	}

	.price {
		height: 200px;
		text-align: center;
		line-height: 50px;
	}
</style>
